<template>
	<!-- 运营系统-短剧列表 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('playlet:playlet:index')">    
			<div class="d-flex" slot="header">  
				<el-form class="d-flex b-s my-10" :inline="true" size="small" :model="dataForm"
					@keyup.enter.native="getTableList()">
					<el-form-item label="名称">
						<el-input v-model="dataForm.keyword" placeholder="名称" clearable />
					</el-form-item>

					<el-form-item prop="company" label="公司">
						<el-select clearable v-model="company_value" placeholder="请选择">
							<el-option v-for="(item,index) in companyList" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>


					<el-form-item> 
						<el-button icon="el-icon-search" type="primary"
							@click="getTableList()">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="el-icon-circle-plus-outline" v-show="$hasPermission('playlet:playlet:create')"
							@click="addOrUpdateData()">添加短剧</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="d-flex h-100 b-s flex-column">
				<div class="d-flex flex-1">
					<div class="overflow"> 
						<vxe-grid keep-source border resizable highlight-hover-row size="small" ref="pGrid"
							:loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
							:columns="columns" height="100%" :data="dataList"
							:customs.sync="customColumns" :row-config="{useKey: true}" :column-config="{useKey: true}"
							:edit-config="{trigger: 'click', mode: 'row', showStatus: true}" @cell-click="cellClickFn">
						</vxe-grid>  
					</div>
				</div> 
			</div>  
			<!-- 分页 --> 
			<div class="d-flex" slot="footer">    
				<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page"
					:page-size="dataForm.pageSize" :total="total" 
					:layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div> 
			<!-- 新增/修改弹窗 --> 
			<playlet-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDialog"
				@refreshDataList="getTableList"></playlet-add-or-update>
 
			<!-- 标签编辑 -->
			<el-dialog title="绑定标签" :visible.sync="selecttagDialog">  
				<el-form :model="diyform">
					
				<el-form-item v-if=" diyobj.arr1 && diyobj.arr1.value == 48" :label="diyobj.arr1.label" :label-width="formLabelWidth">
					<el-radio v-model="radioarr" label="1">{{diyobj.arr1.children[0].label}}</el-radio>
  					<el-radio v-model="radioarr" label="2">{{diyobj.arr1.children[1].label}}</el-radio>
				</el-form-item>
				
					
					<el-form-item  v-if=" diyobj.arr2 && diyobj.arr2.value==49"  :label="diyobj.arr2.label" :label-width="formLabelWidth">
						<el-select v-model="diyobj.arr2.arrvalue" multiple placeholder="请选择">
							<el-option
							v-for="item2 in diyobj.arr2.children"
							:key="item2.value"
							:label="item2.label"
							:value="item2.value">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item v-for="(item,index) in diyobj.arr3"  :key="item.value" :label="item.label" :label-width="formLabelWidth">
						<el-select v-model="item.arrvalue" @change="changeselect($event,index)" placeholder="请选择">
							<el-option
							v-for="item2 in item.children"
							:key="item2.value"
							:label="item2.label"
							:value="item2.value">
							</el-option>
						</el-select>
					</el-form-item>	 

				
				</el-form>
				<div slot="footer" class="dialog-footer"> 
				<el-button @click="showselecttag('f')">取 消</el-button>
				<el-button type="primary" @click="showselecttag('t')">确 定</el-button>
				</div> 
			</el-dialog>

 
			<!-- 批量上传弹窗 -->
			<upload-add-or-update v-if="uploadAddVisible" ref="uploadAddDialog"></upload-add-or-update>
			<!-- 图片预览弹窗 -->
			<pic-preview v-if="picVisible" ref="picDialog"></pic-preview>
			<!-- 视频预览弹窗 -->
			<video-view v-if="videoVisible" ref="videoDialog"></video-view>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex mb-10" :src="permissionBase64" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	let that;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mixinViewModule from '@/mixins/view-module'
	import PlayletAddOrUpdate from './playlet-add-or-update'
	import UploadAddOrUpdate from './upload-add-or-update'
	import VideoView from './video-view'
	import PicPreview from './picPreview'
	export default {
		mixins: [mixinViewModule],
		components: {
			PlayletAddOrUpdate,
			UploadAddOrUpdate,
			PicPreview,
			VideoView
		},
		data() {
			return {
				company_value:null,
				companyList:[],
				diyobj:{},
				curentID:'',
				radioarr:"0",
				keepalltagList:[],
				alltagList:[],
				options: [{
				value: '选项1',
				label: '黄金糕'
				}, {
				value: '选项2',
				label: '双皮奶'
				}, {
				value: '选项3',
				label: '蚵仔煎'
				}, {
				value: '选项4',
				label: '龙须面'
				}, {
				value: '选项5',
				label: '北京烤鸭'
				}],
				value1: [],
				diy_dialogFormVisible:false,
				diyform: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
					},
					formLabelWidth: '100px',
				selecttagDialog:false,
				permissionBase64:'',
				tableLoading:false,
				click_rowData:{},
				curent: 0,
				total: 0,
				curName: '',
				dataForm: {
					page: 1,
					pageSize: 10,
					keyword:'',//搜索
				},
				playTitle:'',
				innerPlayVisible: false,
				uploadAddVisible: false,//批量上传弹窗
				picVisible: false,
				videoVisible:false,
				// 增改
				addOrUpdateVisible: false,
				roleVisible: false,
				dataList: [],
				customColumns: [],
				columns: [{
						title: 'ID',
						field: 'id',
						width: 100,
						sortable: false,
						align: 'center'
					},
					{
						title: '短剧名称',
						field: 'name',
						width: 200,
						sortable: false,
						align: 'center'
					},
					{
						title: '封面图片',
						field: 'cover',
						width: 120,
						sortable: false,
						align: 'center',
						type: 'html', // 标识该列需要显示图片
						formatter: ({ cellValue,row }) => {
						    return `<img src="${cellValue}" width="80" height="auto" class="pointer" onclick="previewPicFn(\'${cellValue}\',\'${row.name+' 封面图'}\')" style="border-radius: 5px;">`
						}
					},
					{
						title: '简介',
						field: 'introduction',
						width: 300,
						sortable: false,
						align: 'center',
						type: 'html', // 标识该列需要显示图片
						formatter: ({ cellValue,row }) => {
							const div = document.createElement('div');
							div.innerHTML = cellValue;
						
							
							return `<div class="jianjie">
										${ div.textContent }
									</div>`
						}
					},
					// {
					// 	title: '微信剧目审核状态',
					// 	field: 'drama_status_name',
					// 	width: 150,
					// 	sortable: false,
					// 	align: 'center'
					// },
					{
						title: '总共集数',
						field: 'playet_episodes_count',
						width: 150,
						sortable: true,
						align: 'center'
					},
					// {
					// 	title: '是否完结',
					// 	field: 'is_finish_name',
					// 	width: 100,
					// 	sortable: false,
					// 	align: 'center'
					// },
					// {
					// 	title: '价格',
					// 	field: 'amount',
					// 	width: 120,
					// 	sortable: true,
					// 	align: 'center'
					// },
					// {
					// 	title: '支付类型',
					// 	field: 'pay_type_name',
					// 	width: 120,
					// 	sortable: false,
					// 	align: 'center'
					// },
					// {
					// 	title: '最后集名称',
					// 	field: 'last_episode_name',
					// 	width: 200,
					// 	sortable: false,
					// 	align: 'center'
					// },
					// {
					// 	title: '付费起始剧集id',
					// 	field: 'pay_start_cid',
					// 	width: 200,
					// 	sortable: false,
					// 	align: 'center'
					// },
					{
						title: '状态',
						field: 'status_name',
						width: 100,
						sortable: false,
						align: 'center'
					},
					// {
					// 	title: '点赞数量',
					// 	field: 'likes_number',
					// 	width: 120,
					// 	sortable: true,
					// 	align: 'center'
					// },
					// {
					// 	title: '分享数量',
					// 	field: 'share_number',
					// 	width: 120,
					// 	sortable: true,
					// 	align: 'center'
					// },
					// {
					// 	title: '热度数量',
					// 	field: 'hot_number',
					// 	width: 120,
					// 	sortable: true,
					// 	align: 'center'
					// },
					{
						title: '创建时间',
						field: 'created_at',
						width: 180,
						sortable: true,
						align: 'center'
					},
					{
						title: '更新时间',
						field: 'updated_at',
						width: 180,
						sortable: true,
						align: 'center'
					},
					{
						title: '操作',
						field: 'other',
						width: 400,
						fixed: 'right',
						sortable: false,
						align: 'center',
						slots: {
							default: ({
								row
							}) => {
								return [ <el-button size = "mini" round
								icon = "el-icon-video-play"
								v-show={this.$hasPermission('playlet:playlet:view')}
								onClick = {
									() => this.lookVideoData(row)
								}
								type = "primary" >查看剧集</el-button>,
								<el-button size = "mini"
									round
									icon = "el-icon-upload2"
									v-show = {
										this.$hasPermission('playlet:playlet:update')
									}
									onClick = {
										() => this.uploadAddData(row)
									}
									type = "primary" > 批量上传 </el-button>,
								<el-button size = "mini" round
								icon = "el-icon-coordinate"
								v-show={row.drama_status==0||row.drama_status==4}
								onClick = {
									() => this.submitDxamine(row)
								}
								type = "primary" >提交审核</el-button>,
									<el-button size = "mini"
									round
									icon = "el-icon-edit"
									v-show = {
										this.$hasPermission('playlet:playlet:update')
									}
									onClick = {
										() => this.addOrUpdateData(row)
									}
									type = "primary" > 修改 </el-button>, 


									<el-button size = "mini"
									round
									icon = "el-icon-edit"
									v-show = {
										this.$hasPermission('playlet:playlet:update')
									}
									onClick = {
										() => this.selecttag(row)
									}
									type = "primary" > 标签 </el-button>, 



									<el-button size = "mini"
									round
									icon = "el-icon-delete"
									v-show = {
										this.$hasPermission('playlet:playlet:delete')
									}
									type = "danger"
									onClick = {
										() => this.deleteHandleSetter(row)
									} > 删除 </el-button>, 
								]
							}
						}
					}

				]
			}
		},
		created() {
			if (this.$hasPermission('playlet:playlet:index')) {
				this.getTableList();
				this.getcompanyList();
			}
		},
		mounted(){
			that = this;
			//预览图片
			window.previewPicFn = (url,title)=>{
				console.log(url);
				console.log(title);
				that.picVisible = true;
				that.$nextTick(() => {
					that.$refs.picDialog.update(url,title);
				})
			}
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			]),
			

			
		},
		methods: {
			...mapMutations({
				pageInit: 'd2admin/page/init',
				headerSet: 'd2admin/menu/headerSet'
			}),

			async getcompanyList(){
				let data =  await this.$axios.get( `/api/common/company`)
				this.companyList = data
				console.log(483,this.companyList)
			},
			changeselect(e,index){
				let that =this
				console.log(422,e,index)
				let arr =  this.diyobj.arr3
				arr[index].children.forEach(item=>{
					if( item.value == e){
						item.selected = true;
					}else{
						item.selected = false;
					}
				})
				this.diyobj.arr3 = arr
				
			},
			async selecttag(e){
				let that = this;
				this.curentID = e.id;
				let data =  await this.$axios.get( `/api/playlet/playlet/tag/${e.id}`)
				console.log(483,data)
				let diyobj = {}
				let diyarr = []
				data.forEach((item,index) => {
					if(index==0){
						item.children.forEach((item2,index2) => {
							if(item2.selected){
								that.radioarr = index2+1 +'';
							}
						});
						diyobj.arr1 = item
					}else if(index==1){
						// console.log(409,index)
						item.arrvalue = []
						item.children.forEach(item2 => {
							if(item2.selected){
								console.log(405,item2.value)
								item.arrvalue.push(item2.value)
							}else{
								item2.selected = false
							}
						});
						diyobj.arr2 = item
					}else {
						item.arrvalue = ""
						item.arrvalue2 = []
						item.children.forEach(item2 => {
							if(item2.selected){
								console.log(405,item2.value)
								item.arrvalue=item2.label
							}else{
								item2.selected = false
							}
						});
						diyarr.push(item)
					}
				});
				diyobj.arr3 = diyarr
				this.diyobj = diyobj
				this.alltagList = data;
				console.log(453,this.alltagList)
				// this.keepalltagList = JSON.parse(JSON.stringify(data))
				this.$nextTick(()=>{
					setTimeout(() => {
						this.selecttagDialog = !this.selecttagDialog;
					}, 500);
					
				})
			
				
				},
			async showselecttag(str){
				let that = this;
				if(str == 't'){
					
					let arr = [];
					if(Number(that.radioarr)!=0){
						let selectid = that.alltagList[0].children[Number(that.radioarr)-1].value
						arr.push(selectid)
					}
					
					let alltagList = that.alltagList;
					alltagList.forEach((element,index) => {
						if(index ==1 ){
							if(element.arrvalue){
								arr = arr.concat(element.arrvalue) 
							}
						  
						}
						console.log(496,arr)
						if(index >1 ){  
							element.children.forEach(item2=>{
								if(item2.selected){
									arr.push(item2.value)
								}
								
							})
							
							
						
						}
					
					});
					console.log(521,alltagList)
					console.log(501,arr)
					let id = that.curentID;
					 const examineRes = await that.$axios.post(
						`/api/playlet/playlet/tag/${id}`,
						{"tag_ids": arr}
					) 
					this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1200
					})
				}else{

					console.log(228,that.radioarr)
					that.radioarr = '0';
					console.log('点击了取消')
				}
				this.selecttagDialog = !this.selecttagDialog;
			},

			gettagdata(){

			},
			cellClickFn({row,columnIndex}){
				this.click_rowData = row;
			},
			closeVideoDialogFn() {
				console.log(this.player);
				if (this.player) {
					this.player.pause();
					this.player.seek(0);
				}
			},
			async getTableList() {
				company_id
				// console.log(556,this.dataForm)
				// console.log(575,this.company_value)
				let company_id = this.company_value
				if(this.dataForm.keyword!='' || company_id){
					this.dataForm.page = 1
				}
				let obj = this.dataForm
				obj.company_id = company_id
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/playlet/playlet?'+this.$qs.stringify(obj))
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
			},
			// 查看视频
			async lookVideoData(row) {
				console.log(row)
				this.videoVisible = true;
				if (typeof row == 'object' && row != null) {
					// this.curName = row.real_name;
					const id = row.id;
					const videoListRes = await this.$axios.get(`/api/playlet/playlet/episodesList/${id}`, {});
					if(Array.isArray(videoListRes)){
						if(videoListRes.length){
							this.$nextTick(() => {
								console.log(row.name);
								this.$refs.videoDialog.title=row.name;
								this.$refs.videoDialog.update(videoListRes); 
							})
							return;
						}
					}
					this.$message({
						message: '剧集视频为空！',
						type: 'error',
						duration: 1200
					})
				}
			},
			//提交审核
			async submitDxamine(row){
				console.log(row.id);
				this.$confirm('是否提交审核?', '重要提示', {
					confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
					this.$axios.get(`/api/playlet/playlet/auditDrama/${row.id}`, {}).then(res=>{
						this.getTableList();
						this.$message({
							message: '提交审核成功！',
							type: 'success',
							duration: 1500
						}) 
					}); 
				}).catch(); 
			},
			//新增/修改弹窗
			async addOrUpdateData(row) {   
				console.log(560,row)
				this.addOrUpdateVisible = true;
				if (typeof row == 'object' && row != null) {
					// this.curName = row.real_name;
					const id = row.id;
					const userRes = await this.$axios.get(`/api/playlet/playlet/update/${id}`, {});
						console.log(600,userRes)
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.playId = id;
						this.$refs.addOrUpdateDialog.innerTitle = row.name;
						this.$refs.addOrUpdateDialog.update(userRes,this.companyList);
					})
				} else {
					console.log("来了老弟",this.companyList)
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.playId = null;
						this.$refs.addOrUpdateDialog.init(this.companyList)
					})
				}
			},
			//批量上传弹窗
			async uploadAddData(row) {
				console.log(row)
				this.uploadAddVisible = true;
				if (typeof row == 'object' && row != null) {
					// this.curName = row.real_name;
					const id = row.id;
					const userRes = await this.$axios.get(`/api/playlet/playlet/update/${id}`, {});
					this.$nextTick(() => {
						this.$refs.uploadAddDialog.playId = id;
						this.$refs.uploadAddDialog.innerTitle = row.name;
						this.$refs.uploadAddDialog.dataForm.name = userRes.name;
						this.$refs.uploadAddDialog.init();
					})
				}
			},
			// 删除
			deleteHandleSetter(row) {
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/playlet/playlet/delete/${row.id}`, {}).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.getTableList()
							}
						})
					}).catch(() => {})
				}).catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.vxe-cell .el-button){
		margin-bottom: 10px;
	}
	.item {
		.close{
			width: 26px;
			height: 26px;
			border: 2px solid #f76f21;
			border-radius: 26px;
			.close-icon{
				font-size: 20px;
				color: #f76f21;
			}
		}
		.item-title {
			font-size: 22px;
			font-weight: bold;
		}

		.item-simulate {
			border: 6px solid #a3a2a2;
			border-radius: 10px;
			width: 375px;
			min-height: 700px;
			max-height: 1200px;
			margin: 0 auto 10px;
			padding: 10px 5px;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: flex-start;

				.box {
					width: 165px;
					height: 93px;
					background: #f9f8f8;
					border: 2px solid #f5f5f5;
					border-radius: 8px;
					display: flex;
					position: relative;
					flex-direction: column;
					justify-content: flex-end !important;
					padding: 0 !important;
					box-sizing: content-box;
					margin: 10px 0;
					align-items: center;
					.pointer{
						width: 50%;
						height: auto;
						position: absolute;
						bottom: 0;
						right: 0;
					}
					.price{
						font-size: 15px;
						font-weight: 600;
						line-height: 35px;
						margin: 0;
						em{
							font-size: 35px;
							font-style: normal;
						}
					}
					.get {
					    width: 100%;
					    height: 28px;
					    line-height: 28px;
					    text-align: center;
					    background: linear-gradient(180deg,#fff19d,#ff9e00);
					    border-radius: 0 0 5px 5px;
					    font-size: 14px;
					    color: #583600;
					    letter-spacing: 1px;
					    font-weight: 500;
					    margin: 0;
					}
				}
				.box-normal{
					.price{
						color: #f76f21;
					}
					.get {
					    background: #fff7e3;
					    color: #bf891c;
					}
				}
				.box-active {
					border: 2px solid #f97d36;
				}
			}
		}
	}
	
</style>
<style>
.jianjie{
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		line-height: 25px;
		padding: 0 20px;
	}
</style>